<template>
  <div>
    <el-form label-width="80px" class="r-text" :model="workOrderInfo">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item :label="$t('workOrderMg.workOrderId')">
            {{ workOrderInfo.id }}
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item :label="$t('workOrderMg.orderName')">
            {{ workOrderInfo.orderName }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item :label="$t('workOrderMg.orderType')">
            {{ workOrderInfo.typeName }}
            <el-button
              v-if="editAble"
              type="text"
              @click="onShowModify('type')"
            >
              {{ $t('btns.modify') }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('workOrderMg.moduleName')">
            {{ workOrderInfo.moduleName }}
            <el-button
              v-if="editAble"
              type="text"
              @click="onShowModify('module')"
            >
              {{ $t('btns.modify') }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('workOrderMg.createdDate')">
            {{ workOrderInfo.createdDate }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item :label="$t('workOrderMg.problem')">
        <pre>{{ workOrderInfo.description }}</pre>
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item :label="$t('workOrderMg.picture')">
        <Rupload :value="workOrderInfo.imagesBusinessId" is-img preview />
      </el-form-item>

      <el-form-item :label="$t('workOrderMg.accessory')">
        <Rupload :value="workOrderInfo.fileBusinessId" preview />
      </el-form-item>
    </el-form>
    <ModifyWo
      v-if="editAble"
      :visible.sync="modalKeys.modifyWo"
      :modal-data="workOrderInfo"
      :modify-type="modifyType"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Rupload from '@/components/r-upload'
import ModifyWo from './ModifyWo'

const modalKeys = {
  modifyWo: false
}

export default {
  name: 'OrderEdit',
  inject: ['workOrderId', 'isProcess'],
  components: {
    Rupload,
    ModifyWo
  },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    isClosed: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      modalKeys,
      modifyType: ''
    }
  },

  computed: {
    ...mapState('workOrder', ['workOrderInfo']),
    editAble() {
      return this.isProcess && !this.isClosed
    }
  },
  mounted() {},
  methods: {
    onShowModify(t) {
      this.modifyType = t
      this.modalKeys.modifyWo = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
